<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS个人导航页|Ficklelyh|-Haloer的学习笔记|HookFix</title>
    <meta name="keywords" content="JS, Haloer, HookFix课堂笔记, HookFix网络安全团队,">
    <meta name="description" content="这是一个个人导航页面，包含常用网站链接和个人信息。Haloer Ficklelyh">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./tabler-icons.min.css">
    <link rel="stylesheet" type="text/css" href="./mor.css">
  
</head>
<body>
    <div class="container">
        <div class="profile">
            <div class="avatar">
                <img src="https://q2.qlogo.cn/headimg_dl?dst_uin=137666693&spec=100" alt="JS">
            </div>
            <div class="profile-info">
                <h1>JS</h1>
                <p>马行千里，不洗尘沙。</p>
                <div>
                    <span class="badge">最新更新日期2025年1月9日</span>
                    <!-- <span class="badge">HaloerAPI Documentation Updated</span> -->
                </div>
            </div>
        </div>

        <div class="nav-container">
            <div class="nav-tabs">
                <div class="nav-tab active" data-tab="documentation">个人项目</div>
                <div class="nav-tab" data-tab="bigdata">大数据</div>
                <div class="nav-tab" data-tab="programming">编程语言</div>
                <div class="nav-tab" data-tab="other">Other</div>
            </div>

            <div class="nav-content" id="nav-content">
                <!-- Content will be dynamically populated by JavaScript -->
            </div>
        </div>

        <div class="music-player">
            <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86"
                src="//music.163.com/outchain/player?type=2&id=2655401282&auto=1&height=66"></iframe>
        </div>
    </div>

    <script>
        const links = {
            documentation: [
                { name: 'Haloer API', url: 'https://ficklelyh.atomgit.net/web/api.html', icon: 'ti ti-file-code' },
                { name: 'Cookie', url: 'https://ficklelyh.atomgit.net/web/room.html', icon: 'ti ti-cookie' },
                { name: 'DW CS6 (翻译)', url: 'https://ficklelyh.atomgit.net/web/high/dwres.html', icon: 'ti ti-world' },
                { name: 'ImGui', url: 'https://ficklelyh.atomgit.net/web/imgui.html', icon: 'ti ti-layout-dashboard' },
                { name: 'Docker', url: 'https://ficklelyh.atomgit.net/web/docker.html', icon: 'ti ti-brand-docker' },
                { name: '课程表', url: 'https://ficklelyh.atomgit.net/web/kcb.html', icon: 'ti ti-file-code' },
            ],
            bigdata: [
                { name: 'HDFS', url: 'https://ficklelyh.atomgit.net/web/hdfs.html', icon: 'ti ti-database' },
                { name: 'Hive', url: 'https://ficklelyh.atomgit.net/web/hive.html', icon: 'ti ti-database' },
                { name: 'Mapreduce', url: 'https://ficklelyh.atomgit.net/web/mapreduce.html', icon: 'ti ti-database' },
                { name: 'Echars', url: 'https://ficklelyh.atomgit.net/web/echars.html', icon: 'ti ti-chart-line' },

                { name: 'Pandas 1', url: 'https://ficklelyh.atomgit.net/web/pandas.html', icon: 'ti ti-table' },
                { name: 'Pandas 2', url: 'https://ficklelyh.atomgit.net/web/pandas1.html', icon: 'ti ti-table' },
            ],
            programming: [
                { name: 'Java', url: 'https://ficklelyh.atomgit.net/web/java.html', icon: 'ti ti-code' },
                { name: 'Lua', url: 'https://ficklelyh.atomgit.net/web/miniw.html', icon: 'ti ti-code' },
                { name: 'C++', url: 'https://ficklelyh.atomgit.net/web/c-code.html', icon: 'ti ti-code' },
                { name: 'Electron', url: 'https://ficklelyh.atomgit.net/web/electron.html', icon: 'ti ti-apps' },
               
            ],
            other: [
            { date: '2025-01-09', title: '个人导航页更新', description: '增加了时间轴功能，用于记录重要更新。', icon: 'ti ti-clock' },
            { date: '2025-01-06', title: '上传 kcb.html', description: '新增了kcb.html页面，提供了更多资源链接。', icon: 'ti ti-file-code' },
            { date: '2025-01-06', title: '更新 room.html', description: '优化了room.html的设计，提升了用户体验。', icon: 'ti ti-file-code' },

            { date: '2025-01-06', title: '上传 imgui.html', description: '引入ImGui相关资料，为开发者提供更多参考。', icon: 'ti ti-file-code' },
            { date: '2025-01-06', title: '更新 index.html', description: '调整了主页布局，确保最新内容优先展示。', icon: 'ti ti-file-code' },
            { date: '2025-01-06', title: '更新 api.html', description: '进一步完善API文档，确保其与当前版本一致。', icon: 'ti ti-file-code' },

        
        
        ]
        };

        function showTab(tabName) {
    const content = document.getElementById('nav-content');
    content.innerHTML = '';

    if (tabName === 'other') {
        links[tabName].forEach(entry => {
            const entryElement = document.createElement('div');
            entryElement.className = 'timeline-entry';
            entryElement.innerHTML = `
                <div class="entry-date">${entry.date}</div>
                <i class="${entry.icon}"></i>
                <div class="entry-content">
                    <h3>${entry.title}</h3>
                    <p>${entry.description}</p>
                </div>
            `;
            content.appendChild(entryElement);
        });
    } else {
        links[tabName].forEach(link => {
            const linkElement = document.createElement('a');
            linkElement.href = link.url;
            linkElement.target = '_blank';
            linkElement.rel = 'noopener noreferrer';
            linkElement.className = 'nav-link';
            linkElement.innerHTML = `
                <i class="${link.icon}"></i>
                <span>${link.name}</span>
            `;
            content.appendChild(linkElement);
        });
    }

    // 更新激活标签
    document.querySelectorAll('.nav-tab').forEach(tab => {
        tab.classList.remove('active');
        if (tab.dataset.tab === tabName) {
            tab.classList.add('active');
        }
    });
}

// 添加点击处理程序到标签
document.querySelectorAll('.nav-tab').forEach(tab => {
    tab.addEventListener('click', () => showTab(tab.dataset.tab));
});

// 显示初始标签
showTab('documentation');





    </script>
</body>
</html>